import * as echarts from 'echarts'

export function treeChart(chartId, data) {
  const myChart = echarts.init(document.getElementById(chartId))
  window.addEventListener('resize', () => {
    myChart.resize()
  })

  let option = {
    tooltip: {
      trigger: 'item',
      triggerOn: 'mousemove'
    },
    series: {
      type: 'tree',
      id: 0,
      name: 'tree1',
      data: [data],
      top: '10%',
      left: '6%',
      bottom: '10%',
      right: '30%',
      symbolSize: 7,
      edgeShape: 'polyline',
      edgeForkPosition: '63%',
      initialTreeDepth: -1,
      lineStyle: {
        width: 2
      },
      label: {
        backgroundColor: '#fff',
        position: 'left',
        fontSize: '18',
        verticalAlign: 'middle',
        align: 'right',
        formatter: '{b}'
      },
      leaves: {
        label: {
          position: 'right',
          verticalAlign: 'middle',
          fontSize: '18',
          align: 'left',
          formatter: '{b}'
        }
      },
      emphasis: {
        focus: 'descendant'
      },
      expandAndCollapse: true,
      animationDuration: 550,
      animationDurationUpdate: 750
    }
  }

  myChart.setOption(option)
}
